@charset "utf-8";

/* =========== Fonts =========== */
@font-face {
	font-family:'MuseoSans';
	src:url('../../../fonts/MuseoSans_500-webfont.eot');
	src:url('../../../fonts/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
		url('../../../fonts/MuseoSans_500-webfont.woff') format('woff'),
		url('../../../fonts/MuseoSans_500-webfont.ttf') format('truetype'),
		url('../../../fonts/MuseoSans_500-webfont.svg#MuseoSans500') format('svg');
	font-weight:normal;
	font-style:normal;
}

@font-face {
	font-family:'MuseoSlab';
	src:url('../../../fonts/Museo_Slab_500-webfont.eot');
	src:url('../../../fonts/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
		url('../../../fonts/Museo_Slab_500-webfont.woff') format('woff'),
		url('../../../fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
		url('../../../fonts/Museo_Slab_500-webfont.svg#Museo_Slab500') format('svg');
	font-weight:normal;
	font-style:normal;
}

.realmlist {
    display: block ruby;
    font-size: 15px;
}

/* =========== Logo =========== */
.logo-container {
    text-align: center;
    padding: 20px 0;
}

.logo-container,
.logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

.site-logo,
.logo img,
.logo-image {
    width: auto !important;
    height: 250px !important;
    max-height: 250px !important;
    margin: 15px auto !important;
    object-fit: contain !important;
}

/* =========== General =========== */
body {
	font-family:MuseoSans, Arial, Helvetica, Sans-seif;
	font-size:13px;
	color:#ffffff;
	background-image:url(../images/generated-image_35.png);
	background-repeat:no-repeat;
	background-position:top center;
	background-size: cover;
	background-attachment: fixed;
	background-color:#040000;
	text-shadow:1px 1px 0px #000;
	padding-top: 0;
	margin-top: 0;
}

#left {
    *, ul, li, h1, h2, p, b {
        font-weight:normal;
        margin:0px;
        padding:0px;
        list-style:none;
        line-height:1.5;
    }
}

*:focus {
	outline:none;
}

.clear {
	clear:both;
}

input, select, textarea {
	box-sizing:content-box;
	-ms-box-sizing:content-box;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
}

a {
	text-decoration:none;
	color:#3d4346;
}

a:hover {
	color:#A07332;
}

a img {
    border: none;
}

#left #left_menu li a, #top_menu li a, footer #logo {
    transition:0.3s all;
    -webkit-transition:0.3s all;
    -moz-transition:0.3s all;
    -ms-transition:0.3s all;
    -o-transition:0.3s all;
}

/* =========== Main =========== */
#wrapper {
    width: 1020px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    margin-top: 50px;
}

/* =========== Top Menu =========== */
#top_menu {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    padding: 10px 20px;
    margin-bottom: 20px;
    text-align: center;
}

#top_menu li {
    display: inline-block;
    margin-left: 15px;
}

#top_menu li a {
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    transition: color 0.3s;
}

#top_menu li a:hover {
    color: #A07332;
}

/* =========== Content Layout =========== */
#main {
    display: flex;
    gap: 20px;
}

#left {
    width: 280px;
    flex-shrink: 0;
}

#right {
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 5px;
    padding: 20px;
}

/* =========== Sidebar Articles =========== */
#left article {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    margin-bottom: 20px;
}

#left article h1.top {
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px 5px 0 0;
    font-size: 14px;
    text-transform: uppercase;
}

#left article .body {
    padding: 15px;
}

#left article .body a {
    color: #A07332;
}

#left article .body a:hover {
    color: #B88441;
}

#left #left_menu {
	background: rgba(0, 0, 0, 0.5);
	padding:20px;
	border-radius: 0 0 5px 5px;
}

#left #left_menu li {
	margin-bottom:10px;
}

#left #left_menu li:last-child {
	margin:0px;
}

#left #left_menu li a {
	color:#ffffff;
	text-shadow:1px 1px 0px #000;
}

#left #left_menu li a:hover {
	color:#A07332;
	padding-left:5px;
}

#left #left_menu li a img {
	margin-right:5px;
}

/* =========== Right side =========== */
#right {
	width:805px;
	float:right;
    margin-right: -20px;
}

.main-article {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    margin-bottom: 30px;
}

.article-title {
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 15px 20px;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 5px 5px 0 0;
    margin: 0;
}

.article-content {
    padding: 20px;
    color: #fff;
}

.logo-container {
    text-align: center;
    padding: 10px 0;
    margin-bottom: 10px;
}

.site-logo {
    max-height: 60px;
    width: auto;
    margin: 0 auto;
    display: block;
}

.article-content img {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: 3px;
}

#right article .news_bottom {
	margin-top:15px;
	padding-top:15px;
	border-top:1px solid #1E1E1E;
	color:#666666;
}

#right article .news_bottom .comments_button {
	float:right;
}

#right article .news_bottom a {
	color:#A07332;
}

#right article .news_bottom a:hover {
	color:#B88441;
}

/* =========== Footer =========== */
footer {
	height:61px;
	background: rgba(0, 0, 0, 0.7);
	margin-top:35px;
	text-align:center;
	padding-top:20px;
	color:#595959;
	text-shadow:1px 1px 0px #000;
	border-radius: 5px;
}